import React from 'react';
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConfigProvider, theme, App as AntApp } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import './App.css';
import ProtectedRoute from '@/components/ProtectedRoute';
import Dashboard from '@/pages/Dashboard';
import Login from '@/pages/Login';
import ProjectManager from '@/pages/ProjectManager';
import Layout from '@/components/Layout';
import { WalkthroughProvider } from './contexts/WalkThroughContext';
import { Provider } from 'react-redux';
import { store } from './store';
import GlobalLoadingProvider from './components/common/GlobalLoading';
import VideoEditor from '@/pages/VideoEditor';
import Test from './test/test';
import UserUsageProfile from '@/pages/UserUsageProfile';
import Settings from './components/form/v2/Settings';

interface AppRoute {
    path: string;
    element: React.ReactNode;
    protected?: boolean;
    layout?: boolean;
}

const appRoutes: AppRoute[] = [
    {
        path: '/login',
        element: <Login />,
    },
    // {
    //     path: '/',
    //     element: <Dashboard />,
    //     protected: true,
    //     layout: true,
    // },
    // {
    //     path: '/projects',
    //     element: <ProjectManager />,
    //     protected: true,
    //     layout: true,
    // },
    {
        path: '/',
        element: <ProjectManager />,
        protected: true,
        layout: true,
    },
    {
        path: '/editor',
        element: <VideoEditor />,
    },
    {
        path: '/test',
        element: <Test />,
    },
    {
        path: '/user-usage',
        element: <UserUsageProfile />,
        protected: true,
        layout: true,
    },
    {
        path: '*',
        element: <Navigate to="/" replace />,
    },
];

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
            retry: 2,
            staleTime: 5 * 60 * 1000,
        },
    },
});

const themeConfig = {
    algorithm: theme.defaultAlgorithm,
    token: {
        colorPrimary: '#667eea',
        borderRadius: 8,
        colorBgContainer: '#ffffff',
    },
    components: {
        Layout: {
            siderBg: '#ffffff',
            headerBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        },
        Menu: {
            darkItemBg: 'transparent',
            darkItemSelectedBg: 'transparent',
            darkItemHoverBg: 'rgba(255, 255, 255, 0.1)',
            darkItemColor: 'rgba(255, 255, 255, 0.85)',
            darkItemSelectedColor: 'white',
            darkSubMenuItemBg: 'transparent',
            horizontalItemSelectedColor: 'white',
            horizontalItemSelectedBg: 'transparent',
            itemSelectedColor: 'white',
            horizontalItemBorderRadius: 0,
        },
    },
};
const App: React.FC = () => {
    return (
        <Provider store={store}>
            <QueryClientProvider client={queryClient}>
                <ConfigProvider locale={zhCN} theme={themeConfig}>
                    {/* 全局漫游引导组件 */}
                    <WalkthroughProvider>
                        <GlobalLoadingProvider>
                            <AntApp>
                                <Router
                                    future={{
                                        v7_startTransition: true,
                                        v7_relativeSplatPath: true,
                                    }}
                                >
                                    <Routes>
                                        {appRoutes.map((route, _) => {
                                            let element = route.element;
                                            if (route.layout) {
                                                element = <Layout>{element}</Layout>;
                                            }

                                            if (route.protected) {
                                                element = <ProtectedRoute>{element}</ProtectedRoute>;
                                            }
                                            return <Route key={route.path === '*' ? 'catch-all' : route.path} path={route.path} element={element} />;
                                        })}
                                    </Routes>
                                </Router>
                            </AntApp>
                        </GlobalLoadingProvider>
                    </WalkthroughProvider>
                </ConfigProvider>
            </QueryClientProvider>
        </Provider>
    );
};

export default App;
